<template>
  <el-table
    border
    stripe
    :height="height"
    :data="listProductBom"
    :cell-style="styleRow"
  >
    <el-table-column label="#" type="index" align="center" />
    <el-table-column
      label="销售单号"
      align="center"
      prop="modSodh"
      width="120"
    />
    <!--    <el-table-column label="父项代码" align="center" prop="modFxdm" width="120" />
    <el-table-column label="父项品名规格" align="center" prop="modFxPmgg" />-->
    <el-table-column
      label="子项代码"
      align="center"
      prop="modWldm"
      width="120"
    />
    <el-table-column label="子项品名规格" align="center" prop="modZxPmgg" />
    <el-table-column
      label="采购属性"
      :show-overflow-tooltip="true"
      align="center"
      prop="modCgsx"
      width="80"
    >
      <template #default="scope">
        <dict-tag :options="bomCgsxOptions" :value="scope.row.modCgsx" />
      </template>
    </el-table-column>
    <el-table-column label="存放位置" width="90" align="center" prop="modCwdm">
      <template #default="scope">
        <dict-tag :options="allCwOptions" :value="scope.row.modCwdm" />
      </template>
    </el-table-column>
    <el-table-column label="单位" align="center" prop="itmDw" width="80" />
    <el-table-column
      label="需求数量"
      align="center"
      prop="modXqsl"
      width="80"
    />
    <el-table-column
      label="领料数量"
      align="center"
      prop="modLlsl"
      width="80"
    />
    <el-table-column
      label="已领数量"
      align="center"
      prop="modYlsl"
      width="80"
    />
    <el-table-column
      label="可用库存"
      align="center"
      prop="kcmKykc"
      width="80"
    />
    <!-- <el-table-column label="制造单号" align="center" prop="modZzdh" width="120" /> -->
    <el-table-column label="操作" align="center" width="80">
      <template v-slot="scope">
        <el-button
          v-hasPermi="['purchase:halfStart:notReceiving']"
          type="text"
          size="mini"
          @click="notReceiving(scope.row)"
          :disabled="scope.row.modLlsl <= scope.row.modYlsl"
        >
          不领
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { getProductMod } from "@/api/output/picking";
import { getAllCgList } from "@/api/project/mstr";
import { getAll } from "@/api/repertory/Storage";
import ModService from "@/api/output/modService";
export default {
  name: "ListProductBom",
  props: {
    cldZzdh: {
      type: String,
      default: "",
    },
    itmCkdm: {
      type: String,
      default: "",
    },
    height: {
      type: [String, Number],
      default: "200",
    },
  },
  data() {
    return {
      listProductBom: [],
      bomCgsxOptions: [],
      allCwOptions: [],
    };
  },
  watch: {
    cldZzdh: "tableAddClick",
    itmCkdm: "tableAddClick",
  },
  created() {
    //得到采购属性
    getAllCgList().then((response) => {
      this.bomCgsxOptions = response.data;
      for (let i of this.bomCgsxOptions) {
        i.dictLabel = i.cgName;
        i.dictValue = i.cgId + "";
        i.listClass = "default";
      }
    });
    //所有储位
    getAll().then((response) => {
      this.allCwOptions = response.data;
      for (let item2 of this.allCwOptions) {
        item2.dictLabel = item2.storageName;
        item2.listClass = "default";
        item2.dictValue = item2.storageId + "";
      }
    });
  },
  methods: {
    tableAddClick() {
      if (this.cldZzdh && this.itmCkdm) {
        getProductMod(this.cldZzdh, this.itmCkdm).then((response) => {
          this.listProductBom = response.data;
        });
      }
    },
    styleRow({ row }) {
      if (!(row.modLlsl > row.modYlsl))
        return {
          backgroundColor: "#69b05f",
        };
    },
    /** 不领操作，待领料数变为已领料数 */
    notReceiving(row) {
      if (row) {
        const modId = row.modId;
        if (modId != null) {
          this.$confirm(
            "确认要进行操作吗？该条目领料数将修改为已领数",
            "提示",
            {
              cancelButtonText: "取消",
              confirmButtonText: "确认",
              type: "info",
            }
          )
            .then(() => {
              return ModService.notReceiving(modId);
            })
            .then((res) => {
              this.$message.success(res.msg);
              this.tableAddClick();
            })
            .catch(() => {});
        } else {
          this.$message.error("未获取到该项id，请刷新页面重试");
        }
      }
    },
  },
};
</script>
<style module lang="scss"></style>
